<template>
	<view class="shouhuodizhi">
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index" @click="handledetail(item.id)">
				<view class="top">
					<view class="top-left">
						<view class="name">
							<text>{{item.name}}</text>
							<text>{{item.mobile}}</text>
						</view>
						<view class="address">
							<view class="moren" v-if="item.isDefault">
								默认
							</view>
							<view class="address-content">
								{{item.detailedAddress}}
							</view>
						</view>
					</view>
					<image class="top-image" src="../../static/xiayibu@2x.png" mode=""></image>
				</view>
				<view class="bottom">
					<view class="bottom-left">
						<image v-if="item.isDefault" src="../../static/xz_2@2x.png" mode=""></image>
						<image v-else src="../../static/xz_1@2x.png" mode=""></image>
						<text>设为默认地址</text>
					</view>
					<view class="shanchu" @click.stop="handleDel">
						删除
					</view>
				</view>
			</view>
			
			<view class="empty" v-if="showEmpty">
				<text>暂无地址</text>
			</view>
		</view>
		<view class="box-btn">
			<view class="btn" @click="handleAdd">
				添加地址
			</view>
		</view>
		
		<u-mask :show="show" @click="show = false">
			<view class="warp">
				<view class="rect" @tap.stop>
					<view class="tishi">
						提示
					</view>
					<view class="content">
						确定删除吗？
					</view>
					<view class="xian-box">
						<view class="xian">
							
						</view>
					</view>
					<view class="rect-btn">
						<view class="quxiao"  @click="show = false">
							取消
						</view>
						<view class="queding"  @click="sumbit">
							确定
						</view>
					</view>
				</view>
			</view>
		</u-mask>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				show:false,
				page:1,
				size:10,
				pageTotal:'',
				list:[],
				showEmpty:false,
				type:'',
				share:uni.getStorageSync('share')
			}
		},
		onLoad(options) {
			//当type为1 就是直接过来新增编辑地址的  如果type为0  就是过来选择地址的
			this.type = options.type
			this.getaddress()
		},
		onShow() {
		    // 移除全局自定义事件监听器
		    uni.$off('refreshList');
		    // 监听全局的自定义事件
		    uni.$once('refreshList', data => {
		        this.getaddress()
		    })
		},
		methods: {
			//删除
			handleDel(){
				this.show = true
			},
			//确定删除
			sumbit(){
				this.show = false
			},
			//新增地址
			handleAdd(){
				uni.navigateTo({
					url:'/pages/addAddress/addAddress'
				})
			},
			//地址列表
			async getaddress(){
				const params = {
					
				}
				const res = await this.$u.api.address(params)
				this.list = res.data
				if (res.data.length > 0) {
					this.showEmpty = false
				}else{
					this.showEmpty = true
				}
				uni.stopPullDownRefresh()
			},
			//详情
			handledetail(id){
				const params = 'id=' + id
				if (this.type == 1) {
					uni.navigateTo({
						url:'/pages/editAddress/editAddress?' + params
					})
				} else{
					const data = id
					uni.$emit('refreshAddress', data)
					uni.navigateBack({
						delta: 1
					})
				}
				
			}
		},
	}
</script>

<style>
	page{
		background: #FBFBFB;
	}
</style>
<style scoped lang="scss">
    .list{
		
	}
	.item{
		padding: 28rpx 18rpx 18rpx 28rpx;
		background: white;
		margin-bottom: 16rpx;
		background: white;
	}
	.top{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 36rpx;
		border-bottom: 0.5px solid rgba(0,0,0,0.05);
	}
	.top-left{
		
	}
	.name{
		display: flex;
		flex-direction: row;
		font-size: 32rpx;
		font-family: SF Pro Text-Bold, SF Pro Text;
		font-weight: bold;
		color: #333333;
		line-height: 38rpx;
	}
	.name text{
		margin-left: 8rpx;
	}
	.address{
		margin-top: 22rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.moren{
		width: 60rpx;
		height: 32rpx;
		background: url('http://hmh-app.oss-cn-beijing.aliyuncs.com/webStorage/web_16919793742137642.png') no-repeat;
		background-size: 100% 100%;
		border-radius: 2px 2px 2px 2px;
		font-size: 22rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 32rpx;
		text-align: center;
		margin-right: 16rpx;
	}
	.address-content{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 32rpx;
	}
	.top-image{
		width: 48rpx;
		height: 48rpx;
	}
	.bottom{
		padding-top: 18rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.bottom-left{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.bottom-left image{
		width: 36rpx;
		height: 36rpx;
	}
	.bottom-left text{
		margin-left: 24rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 28rpx;
	}
	.shanchu{
		margin-right: 16rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 28rpx;
	}
	.box-btn{
		width: 750rpx;
		height: 188rpx;
		padding: 16rpx 52rpx 0rpx 52rpx;
		position: fixed;
		left: 0;
		bottom: 0;
	}
	.btn{
		width: 646rpx;
		height: 88rpx;
		background: url('http://hmh-app.oss-cn-beijing.aliyuncs.com/webStorage/web_16919793742137642.png') no-repeat;
		background-size: 100% 100%;
		// border-radius: 10px 10px 10px 10px;
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
	}
	
	
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	
	.rect {
		width: 80%;
		// background: #081945;
		// box-shadow: inset 0px 0px 25px 0px #045174;
		background: white;
		border-radius: 10px 10px 10px 10px;
		border-radius: 10px;
	}
	.tishi{
		padding: 30rpx 0rpx 20rpx 0rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
		line-height: 42rpx;
	}
	.content{
		padding: 30rpx 0rpx 40rpx 0rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #000000;
		line-height: 42rpx;
		border-bottom: 0.5px solid rgba(0,0,0,0.05);
	}
	.xian-box{
		padding: 0rpx 30rpx;
	}
	.xian{
		width: 100%;
		height: 0px;
		opacity: 0.2;
		border: 0.5rpx solid #FFFFFF;
	}
	.rect-btn{
		display: flex;
		flex-direction: row;
		padding: 40rpx 0rpx 40rpx 0rpx;
	}
	.quxiao{
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #666666;
		line-height: 42rpx;
	}
	.queding{
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 42rpx;
	}
	
	.empty{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 350rpx;
	}
	.empty image{
		width: 238rpx;
		height: 76rpx;
	}
	.empty text{
		margin-top: 30rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 44rpx;
	}
</style>
